<template>
    <div :style="{minHeight: h}" class="main">
        <header-1 class="d1">
            <template v-slot:center>
               <span class="center">
                    编辑满返代金券
               </span>
            </template>
        </header-1>
        <div class="show">
            <div class="show1">
                <span>代金券金额</span>
                <input class="show1_1" v-model="yh" placeholder="请输入代金券金额" />
            </div>
            <div class="show1">
                <span>返券条件</span>
                <input class="show1_1" v-model="db" placeholder="请输入满多少金额才赠送代金券" />
            </div>
            <div class="show1">
                <span>使用条件</span>
                <input class="show1_1" v-model="num" placeholder="请输入满多少金额才可用代金券" />
            </div>
        </div>
        <div class="show" style="height:135px">
            <div class="show1">
                <span>发放总数量</span>
                <input class="show1_1" v-model="yh1" placeholder="请输入代金券金额" />
            </div>
            <div class="show1">
                <span>赠送数量</span>
                <div class="showm1">
                    <div v-for="item in arr2" :key="item.id" class="showm2" :class="{p1 : item.state}" @click="chose6(item)">
                        {{item.name}}
                    </div>
                </div>
            </div>
        </div>
        <div class="showm">
            <div class="show1">
                <span>用户类型</span>
                <div class="showm1">
                    <div v-for="item in arr" :key="item.id" class="showm2" :class="{p1 : item.state}" @click="chose(item)">
                        {{item.name}}
                    </div>
                </div>
            </div>
            <div class="show1">
                <span>活动日期</span>
                <div class="showm3">
                    <div class="showm3_1" @click="chose1">
                        <span>{{value}}</span>
                        <img src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                    </div>
                </div>
            </div>
            <div class="ssh">
                <div class="ssh1">
                    有效期
                </div>
                    <div class="ssh2">
                        <div v-for="item in arr1" :key="item.id" class="showm2" :class="{p1 : item.state}" @click="chose5(item)">
                            {{item.name}}
                       </div>
               </div>
               <div class="ssh4" v-show="show1">
                     <input placeholder="请输入天数" class="ssh5" v-model="day"  />天
                </div>
            </div>
            <div class="show1">
                <span>使用方式</span>
                <div class="show11">
                    移动端
                </div>
            </div>
        </div>
        <div class="foot1">
           <div class="foot2">
            <p>本活动与店铺满减同享</p>
            <van-switch v-model="checked" active-color="#FFFFFF" inactive-color="#ff6e53" size="24" />
           </div>
        </div>
        <P class="last">温馨提示：活动审核通过后无法修改</P>
        <div class="cr" @click="cr">
            保存
        </div>
        <div class="cr1">

        </div>
        <van-date-picker
                    show-toolbar
                    v-model="currentDate"
					title="选择时间段"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @cancel="cancel"
                    @confirm="onConfirm"
                    @change="onChange"
                    class="t1"
                    v-show="showPicker"
            >
            <template v-slot:tishi>
               <span>
                    请选择时间
               </span>
            </template>
            </van-date-picker>
    </div>
</template>
<script>
import header1 from '../../components/BS/header1View.vue'
import VanDatePicker from '../../components//BS/DoubleTimeView.vue';
import {moni} from '../../https/MaRk'
import { Toast } from 'vant';
export default {
    data(){
        return{
            h: '',
            yh:'',
            db:'',
            num:'',
            day:'',
            yh1:'',
            
            arr:[
            {
                name:'店铺新用户',
                state:false
            },
            {
                name:'店铺所有用户',
                state:false
            },
            ],
         arr1:[
            {
                name:'3天',
                state:false
            },
            {
                name:'7天',
                state:false
            },
            {
                name:'15天',
                state:false
            },
            {
                name:'自定义',
                state:false
            },
            ],
            arr2:[
            {
                name:'每人一张',
                state:false
            },
            {
                name:'每人每天一张',
                state:false
            },
        ],
            checked: true,
            value:'请选择起止时间',
            showPicker: false,
            minDate: new Date(2010, 5, 15),
            maxDate: new Date(2025, 10, 15),
            currentDate: new Date(),
            startDate: '',
            endDate: '',
            show1: false
        }
    },
    created(){
        this.h = window.innerHeight + 'px'
        let a = this.$route.query.name
        this.yh = a.vouchers
        this.db = a.full
        this.num = a.returnRule
        this.yh1 = a.totle
        this.value = a.acData
        if(a.userType == '店铺新用户'){
            this.arr[0].state = true
        }else{
            this.arr[1].state = true
        }
        if(a.giveRule == '一张'){
            this.arr2[0].state = true
        }else{
            this.arr2[1].state = true
        }
        if(a.expiration == '3天'){
            this.arr1[0].state = true
        }else if(a.expiration == '7天'){
            this.arr1[1].state = true
        }
        else if(a.expiration == '15天'){
            this.arr1[2].state = true
        }
        else{
            this.arr1[3].state = true
            this.show1 = true
            this.day = a.expiration.replace("天","")
        }
    },
    components:{
        header1,
        VanDatePicker
    },
    methods:{
        chose(item){
            this.arr.forEach(item =>{
                item.state = false
            })
            item.state = !item.state
        },
        chose5(item){
            this.arr1.forEach(item =>{
                item.state = false
            })
            item.state = !item.state
            if(item.name == '自定义'){
                this.show1 = true
            }else{
                this.show1 = false
                this.day = ''
            }
        },
        chose6(item){
            this.arr2.forEach(item =>{
                item.state = false
            })
            item.state = !item.state
        },
        cr(){
            let obj = ''
            let obj1 = ''
            let obj2 = ''
            this.arr.forEach(item => {
                if(item.state){
                    obj = item.name
                }
            })
            this.arr2.forEach(item => {
                if(item.state){
                    obj1 = item.name
                }
            })
            if(this.day){
                obj2 = this.day
            }
            else{
                this.arr1.forEach(item => {
                if(item.state){
                    obj2 = item.name
                }
            })
            }
            let data = {
                yh : this.yh,
                db : this.db,
                num : this.num,
                yh1 : this.yh1,
                ob : obj,
                ob1: obj1,
                ob2: obj2,
                value : this.value,
                type : '移动端',
                checked : this.checked
            }
            console.log(data);
            moni(data).then(res =>{
                let that = this
                console.log(res);
                Toast.success({
                message:'修改成功',
                duration:1000,
                onClose(){
                    that.$router.push('/okavi15')
                }
            });
            }).catch(err =>{
                console.log(err);
            })
            
        },
         //打开时间选择器
       chose1(){
        this.showPicker = !this.showPicker
       },
       chose2(){
        this.showPicker = !this.showPicker
       },
       // 取消
       cancel(){
        this.showPicker = !this.showPicker
       },
       // 确定
        onConfirm(value, index){
            console.log(`当前值：${value}, 当前索引：${index}`)
            this.startDate = value.slice(0,3).join('-')
            this.endDate = value.slice(4,7).join('-')
            this.value = this.startDate + '至' + this.endDate
            this.showPicker = !this.showPicker
        },
        // 改变
        onChange(picker, value, index) {
            console.log(`当前值：${value}, 当前索引：${index}`)
        },
    }
}
</script>
<style scoped>
.main{
    background-color: #f5f5f5;
}
.show{
    width: 100%;
    height: 195px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;

}
.show1{
    width: 90%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.show1_1{
    width: 240px;
    height: 45px;
    background-color: #f5f5f5;
    border-radius: 5px;
    border: none;
    color: #999999;
}
.showm{
    width: 100%;
    height: 375px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.showm1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 240px;
    height: 45px;
}
.showm2{
    width: 115px;
    height: 30px;
    border-radius: 30px;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 30px;

}
.showm3{
    width: 240px;
    height: 45px;
    background-color: #f5f5f5;
    border-radius: 10px;
    display: flex;
    justify-content: center;
}
.showm3_1{
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999999;
}
img{
    width: 6px;
    height: 10px;
}
.show11{
    width: 240px;
    height: 45px;
    line-height: 45px;
}
.foot1{
    width: 100%;
    height: 60px;
    font-size: 12px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
}
.foot2{
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.last{
    width: 90%;
    margin: 10px auto;
    font-size: 10px;
    color: #797979;
}
.cr{
    width: 90%;
    height: 45px;
    margin: 20px auto;
    line-height: 45px;
    font-size: 15px;
    color: #FFFFFF;
    text-align: center;
    background-color: #ff6e53;
    border-radius: 30PX;
}
.cr1{
    width: 100%;
    height: 30px;
}
.p1{
    background-color: #ffeeee;
    color: #ff6e53;
}
.ssh{
    width: 90%;
    height: 180px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.ssh2{
    width: 240px;
    height: 120px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 10px;
    
}
.ssh4{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 240px;
    height: 60px;
    display: flex;
    align-items: center;
}
.ssh5{
    width: 200px;
    height: 45px;
    margin-right: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
    border: none;
    color: #999999;
    
}
</style>